<template>
  <div>
    <span>获取验证码({{ time }}s)</span>
  </div>
</template>

<script setup lang="ts">
import { ref, watch } from "vue";
//倒计时的事件
let time = ref<number>(5);

//接受父组件传递过来的props->flag:用于控制计数器组件显示与隐藏的
let props = defineProps(["flag"]);
let $emit = defineEmits(['getFlag']);

watch(() => props.flag, () => {
  //开启定时器
  let timer = setInterval(() => {
    time.value--;
    if (time.value == 0) {
      //通知父组件倒计时模式结束
      $emit('getFlag',false);
      //清除定时器
      clearInterval(timer);
    }
  }, 1000);
},{
  immediate: true
})
</script>

<style lang="scss" scoped>

</style>